<template>
	<view>
		<view class="form-wrap">
			<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" labelWidth="130">
				<u-form-item label="所属区域" prop="areaName" borderBottom @click="showSelectArea = true;">
					<u--input v-model="form.areaName" disabled border="none" placeholder="请选择所属区域"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</u--form>
		</view>
		<view class="page-btn-wrap">
			<view class="btn-item">
				<u-button type="primary" text="保存" customStyle="margin: auto 0" @click="handleSubmit"></u-button>
			</view>
		</view>
		<u-picker :show="showSelectArea" ref="uPicker" title="所属区域" :columns="[streetList]" keyName="label"
			@confirm="handleConfirm" @cancel="showSelectArea = false"></u-picker>
	</view>
</template>
<script>
	import {
		getLoactionTree
	} from '@/api/system.js';
	import {
		guanWangUpdate
	} from '@/api/guanwang.js';
	export default {
		data() {
			return {
				form: {
					id: '',
					areaId: '',
					areaName: '',
				},
				rules: {
					'form.areaName': {
						type: 'string',
						required: true,
						message: '请选择所属区域',
						trigger: ['blur', 'change']
					},
				},
				showSelectArea: false,
				streetList: [],
				wellInfo: {},
				eventChannel: null,
			}
		},
		onLoad(option) {
			const eventChannel = this.getOpenerEventChannel();
			this.eventChannel = eventChannel;
			eventChannel.on('sendWellInfo', (data) => {
				console.log(data)
				this.wellInfo = data;
				this.form.areaName = data.areaId_dictText || '';
				this.form.areaId = data.areaId;
				this.form.id = data.id
				this.getLocationTree();
			})
		},
		onUnload() {
			this.eventChannel.off('sendWellInfo');
		},
		methods: {
			async getLocationTree() {
				try {
					const {
						data
					} = await getLoactionTree();
					const areaId = this.form.areaId;
					// 金华市区域列表
					const areaList = data?.result[0]?.children[0]?.children[0]?.children;
					console.log(areaId, areaList, 'ddd');
					// 设备所在区域的街道列表
					const streetList = areaList.find(item => item.children.some(area => area.value === areaId)).children;
					this.streetList = streetList.map(item => {
						return {
							id: item.id,
							label: item.title
						};
					});
					console.log(this.streetList, 'zzz');
				} catch (e) {
					//TODO handle the exception
				}
			},
			handleSubmit() {
				uni.navigateBack({
					delta: 1
				});
			},
			async handleConfirm({
				value
			}) {
				try {
					console.log(value);
					this.form.areaId = value[0].id;
					this.form.areaName = value[0].label;
					const param = {
						isFormData: true,
						...this.form
					};
					await guanWangUpdate(param);
					this.eventChannel.emit('setWellInfo', {
						areaId: this.form.areaId,
						areaId_dictText: this.form.areaName
					});
					this.showSelectArea = false;
				} catch (e) {
					//TODO handle the exception
				}
			},
		}
	}
</script>
<style scoped lang="scss">
	.form-wrap {
		padding: 0 32rpx;
	}

	.page-btn-wrap {
		position: fixed;
		display: flex;
		bottom: 0;
		width: 100%;
		height: 166rpx;
		box-shadow: 0 -4rpx 24rpx 0 #00000014;
		background: white;
		z-index: 99
	}

	.btn-item {
		padding: 16rpx 32rpx 0 32rpx;
		width: 100%;
		height: 100%;
	}
</style>